<template>
  <div>
    <el-button type="primary" icon="el-icon-back" circle @click="back()" />

    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="flex-direction" name="flex-direction">
        <FlexDirection />
      </el-tab-pane>
      <el-tab-pane label="flex-wrap" name="flex-wrap">
        <flexWrap />
      </el-tab-pane>
      <el-tab-pane label="flex-flow" name="flex-flow">
        <flexFlow />
      </el-tab-pane>
      <el-tab-pane label="justify-content" name="justify-content">justify-content</el-tab-pane>
      <el-tab-pane label="align-items" name="align-items">align-items</el-tab-pane>
      <el-tab-pane label="align-content" name="align-content">align-content</el-tab-pane>
    </el-tabs>


    <!-- <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    </el-tabs> -->
  </div>
</template>

<script>
import FlexDirection from '../components/flex/flexDirection.vue'
import flexWrap from '../components/flex/flexWrap.vue'
import flexFlow from '../components/flex/flexFlow.vue'
export default {
  name: "",
  components: {
    FlexDirection,
    flexWrap,
    flexFlow,
  },
  data () {
    return {
      //初始化activeName
      activeName: "flex-direction",
      buttonName: [
        {
          name: 'flex-direction',
          value: 1
        },
        {
          name: 'flex-wrap',
          value: 2
        },
        {
          name: 'flex-flow',
          value: 3
        },
        {
          name: 'justify-content',
          value: 4
        },
        {
          name: 'align-items',
          value: 5
        },
        {
          name: 'align-content',
          value: 6
        }
      ],
      showFlex: {
        flag: 1
      }
    }
  },
  // 
  mounted () {
    this.tableLocal()
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    // 切换tab时保存本地存储
    handleClick (tab) {
      localStorage.setItem('task', tab.name)
    },
    // 调用当前本地存储的tab标签
    tableLocal () {
      if (localStorage.getItem('task') != null) {
        this.activeName = localStorage.getItem('task')
      }
    }
  },
}
</script>

<style lang="less" scoped>
.btons {
  display: flex;
  // flex-direction: ;
}
</style>
